<template>
    <div id="app-container">
        <el-row :gutter="20" class="head">
            <el-col :span="22">
                <!-- <div class="head-content"> -->
                    <div class="head-title">活动管理</div>
                    <!-- <div class="head-time">数据统计截止时间： 2020.5.12</div> -->
                <!-- </div> -->
            </el-col>
            <el-col :span="2">
                <!-- <div> -->
                    <el-button type="primary" @click="dialogVisible = true">创建活动</el-button>
                <!-- </div> -->
            </el-col>

            <el-dialog
                title="活动名称"
                :visible.sync="dialogVisible"
                width="30%">
                <el-input v-model="activityName"></el-input>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmActivityName">确 定</el-button>
                </span>
            </el-dialog>
        </el-row>

        <el-row type="flex" justify="space-between" class="active-search">
            <el-col :span="16">
                <el-row>
                    <el-col :span="12">
                        <el-row type="flex" align="middle">
                            <el-col :span="5">活动时间:</el-col>
                            <el-col :span="12">
                                <el-date-picker
                                    v-model="chooseTime"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="9" :offset="2">
                        <el-row type="flex" align="middle">
                            <el-col :span="6" :offset="1">触达通道:</el-col>
                            <el-select v-model="queryParams.channel" placeholder="请选择">
                                <el-option
                                v-for="item in channelOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="5" :offset="1">
                <div class="choose-group choose-group-box">
                    <el-checkbox-group 
                        v-model="queryParams.createBySelf"
                        class="choose-group-box">
                        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                    </el-checkbox-group>
                    <div class="search-group"><input type="text" v-model="queryParams.name" placeholder="搜索活动名称" @keyup="enterSearchActivity"></div>
                </div>
            </el-col>
            <el-col :span="1" :offset="1" style="margin-left: -10px"> <el-button size='mini' type="primary" @click="getActivityList">搜索</el-button></el-col>
        </el-row>

        <div class="table-content">
            <el-table v-loading="loading" border :data="getActivitiesDetails" style="margin-left:52px;">
                <el-table-column label="活动名称/状态/起止时间" width="400">
                    <template slot-scope="scope">
                        <div class="active-detail">
                            <div class="active-detail-title" v-if="scope.row.status==0">待执行</div>
                            <div class="active-detail-title" v-if="scope.row.status==1">执行中</div>
                            <div class="active-detail-title" v-if="scope.row.status==2">已终止</div>
                            <div>
                                <div class="active-detail-staue">{{ scope.row.name }}</div>
                                <div class="active-detail-time" v-if="!scope.row.preciseTime">{{ scope.row.startDate }} - {{ scope.row.endDate }}</div>
                                <div class="active-detail-time" v-else>{{ scope.row.preciseTime }}</div>
                            </div>
                        </div>
                        <!-- <span>{{ scope.row.createTime }}</span> -->
                    </template>
                </el-table-column>
                <el-table-column label="触达通道" width="200" prop="channel">
                    <template slot-scope="scope">
                        <span v-if="scope.row.sendChannel==1">企业微信</span>
                        <span v-if="scope.row.sendChannel==4">公众号消息</span>
                    </template>
                </el-table-column>
                <el-table-column label="触达人数" width="200" prop="sendCount">
                    <template slot-scope="scope">
                        <span>{{scope.row.sendCount?scope.row.sendCount:0}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="goSetActivity(scope.row.id)"
                        >查看</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            v-if="(scope.row.createByUserId==userId)"
                            @click="(scope.row.status==0||scope.row.status==1)?discontinue():goSetActivity(scope.row.id, true)"
                        >修改</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            v-if="scope.row.status==2&&(scope.row.createByUserId==userId)"
                            @click="updateActivityStatus(scope.row.id, 0)"
                        >上线</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            v-if="scope.row.status!=2&&(scope.row.createByUserId==userId)"
                            @click="updateActivityStatus(scope.row.id, 2)"
                        >终止</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            v-if="(scope.row.createByUserId==userId)"
                            @click="(scope.row.status==0||scope.row.status==1)?discontinue():updateActivityStatus(scope.row.id, 3)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table> 
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getActivityList"
                />
        </div>
    </div>
</template>

<script>
import { activityDisplayList, updateActivityStatus } from "@/api/smartRun/activity";
import { mapGetters } from "vuex";
export default {
    data(){
        return {
            loading: false,
            chooseTime: '',
            channelOptions: [{
                value: '0',
                label: '全部通道'
            },{
                value: '1',
                label: '企业微信'
            },{
                value: '4',
                label: '公众号消息'
            }],
            channel: '1',
            checkedCities: [''],
            cities: ['仅我创建'],
            getActivitiesDetails:[{
                state: 0,
                active: '待续费任务推送',
                startTime: '2020-12-12 00:00',
                endTime: '2021-01-01 02:00',
                channel: '企业微信',
                number: 0,
                createBySelf: true,
                id: 111,
            },{
                state: 1,
                active: '418新客引流500-100优惠活动',
                startTime: '2020-12-12 00:00',
                endTime: '2021-01-01 02:00',
                channel: '树懒IM',
                number: 0,
                createBySelf: false,
                id: 222,
            },{
                state: 2,
                active: '418新客引流500-100优惠活动',
                startTime: '2020-12-12 00:00',
                endTime: '2021-01-01 02:00',
                channel: '公众号消息',
                number: 220,
                createBySelf: true,
                id: 333,
            }],
            activityName: '',
            dialogVisible: false,
            queryParams: {
                startDate: '',
                endDate: '',
                pageNum: 1,
                pageSize: 10,
                channel: '0',
                name: '',
                createBySelf: false,
            },
            total: 0,
        }
    },
    methods: {
        setActivity() {
            this.$confirm(`<input style="width: 240px" v-model="activityName" />`, '活动名称', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true
            }).then(() => {
                // this.$router.push({
                //     name: 'GroupRules',
                //     query: {groupName: this.setGroup}
                // });
            }).catch(() => {         
                });
        },
        confirmActivityName(){
            if(this.activityName==''){
                this.$message({
                    message: '请填写活动名称！',
                    type: 'error'
                });
                return
            }
            this.$router.push({
                name: 'SetActivity',
                query: {activityName: this.activityName}
            });
        },
        getActivityList() {
            this.loading = true;
            console.log(this.chooseTime, 667)
            this.queryParams.startDate = this.chooseTime?this.chooseTime[0]:'';
            this.queryParams.endDate = this.chooseTime?this.chooseTime[1]:'';
            console.log(this.queryParams, 666)
            activityDisplayList(this.queryParams).then(response => {
                this.getActivitiesDetails = response.data.list;
                this.total = response.data.total;
                this.loading = false;
                console.log(this.getActivitiesDetails)
            })
        },
        goSetActivity(id, alter=false){
            console.log(id, alter)
            this.$router.push({
                name: 'SetActivity',
                params: {
                    id: id,
                    alter: alter,
                }
            });
        },
        updateActivityStatus(id, status){
            console.log(id, status)
            updateActivityStatus({
                id: id,
                status: status,
            }).then(response => {
                this.getActivityList();
            })
        },
        discontinue(id) {
            this.$message({
                showClose: true,
                message: '活动正在执行中，继续操作需要先终止活动！',
                type: 'warning'
            });
        },
        enterSearchActivity(e){
            if(e.key == 'Enter'){
                this.getActivityList();
            }
        },
        // sss(){
        //     console.log(777)
        // }
    },
    computed: {
        ...mapGetters(["userId"]),
    },
    created(){
        this.getActivityList();
    }
}
</script>
<style scoped>
    .el-row {
        margin-bottom: 20px;
    }
    .el-row:last-child {
        margin-bottom: 0;
    }
    .el-col {
    border-radius: 4px;
    }
    .bg-purple-dark {
    background: #99a9bf;
    }
    .bg-purple {
    background: #d3dce6;
    }
    .bg-purple-light {
    background: #e5e9f2;
    }
    .grid-content {
    border-radius: 4px;
    min-height: 36px;
    }
    .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
    }
    .head {
        padding: 10px 40px;
        background: #fff;
    }
    #app-container {
        background: #f6f6f6;
        min-height: 100vh;
    }
    .head-title {
        font-size: 20px;
        /* margin-bottom: 20px; */
        line-height: 44px;
    }
    .head-time {
        font-size: 14px;
        color: #999;
    }
    .head-content {
        height: 60px;
    }
    .active-search {
        width: 94%;
        margin: 24px auto;
        font-size: 15px;
    }
    .choose-group {
        display: flex;
        align-content: center;
        justify-content: flex-end;
        margin-bottom: 10px;
    }
    .search-group {
        margin-left: 8px;
        border: 1px solid #DCDFE6;
        font-size: 12px;
        padding: 5px 10px;
        background: #fff;
    }
    .table-content {
        background: #fff;
        width: 94%;
        margin: auto;
        overflow: hidden;
        padding: 30px 0;
    }
    .active-detail {
        display: flex;
        align-items: center;
    }
    .active-detail-title {
        width: 70px;
        text-align: center;
    }
    .active-detail-staue {
        line-height: 30px;
    }
    .active-detail-time {
        color: #aaa;
    }
</style>

<style>
    .choose-group-box,.choose-group-box .el-checkbox{
        display:flex;
        align-items: center;
        justify-content: center;
    }
    .choose-group-box .el-checkbox__inner {
        border-radius: 50%;
        width: 12px;
        height: 12px;
    }
    .choose-group-box .el-checkbox__label {
        padding-left: 5px;
    }
    .choose-group-box .el-checkbox__inner::after {
        height: 5px;
        left: 3px;
    }
    .search-group input {
        border: none;
        outline: none;
    }
    .choose-search .el-input__inner {
        border-radius: 4px 0 0 4px;
        border-right: none;
        width: 120px;
    }
    .choose-search .el-select .el-input.is-focus .el-input__inner,.choose-search .el-select .el-input__inner:focus {
        border-color:#DCDFE6;
    }
    .table-content .el-table {
        width: 85%;
    }
</style>